<template>
  <el-input
    @input="filterChange"
    style="width: 200px; margin-bottom: 10px"
    clearable
    placeholder="请输入用户姓名"
    v-model="inputValue"
  >
    <template #prefix>
      <i class="el-icon-search"></i>
    </template>
  </el-input>
  <el-transfer
    target-order="unshift"
    v-model="testValue"
    @change="transferChange"
    :titles="['待选', '已选']"
    :data="currentPageDatas"
    :format="{ noChecked: '${total}', hasChecked: '${checked}/${total}' }"
  >
    <template #left-footer>
      <el-pagination
        small
        align="right"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-size="page.pageSize"
        :total="page.total"
        layout="prev,pager, next"
      ></el-pagination>
      <!-- :pager-count="5" -->
    </template>
  </el-transfer>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import { getUserList } from "/@/api/user";
export default defineComponent({
  // data() {
  //   return {
  //     currentPageDatas: [],
  //     currentDatas: [],
  //     sourceDatas: [],
  //     page: { pageNum: 1, pageSize: 20, total: 0 }
  //   };
  // },
  setup() {
    let currentPageDatas = ref([]);
    let currentDatas = ref([]);
    let sourceDatas = ref([]);
    let page = reactive({ pageNum: 1, pageSize: 100, total: 0 });
    let testValue = ref([]);
    let inputValue = ref("");

    // 真实请求待添加
    const init = async () => {
      try {
        const { code, data } = await getUserList({
          pageNum: 1,
          pageSize: 10000
        });
        if (code === 200) {
          console.log(data, "data");
          var currentDatasCopy = data.list.map(value => {
            return {
              label: `${value.userName}  ${value.companyName}`,
              key: value.id,
              obj: value
            };
          });

          page.total = currentDatasCopy.length;
          currentDatas.value = currentDatasCopy;
          sourceDatas.value = currentDatasCopy;
          //初始化20条数据给当前第一页的变量
          currentPageDatas.value = currentDatasCopy.slice(0, 100);
        }
      } catch (err) {
        console.log(err);
      }
    };

    //分页change
    const handleCurrentChange = val => {
      //先将选中的从当前数据过滤掉
      page.pageNum = val;
      currentDatas.value = currentDatas.value.filter(function (value) {
        return !testValue.value.includes(value.key);
      });
      //再将过滤好的当前数据选出指定页
      currentPageDatas.value = groupFunc(val);
      //再将选中的目标数组补给当前页变量，从而保证之前选的数据能显示
      currentPageDatas.value = currentPageDatas.value.concat(
        sourceDatas.value.filter(function (val) {
          return testValue.value.includes(val.key);
        })
      );
    };
    //穿梭change
    const transferChange = (current, direction) => {
      //为了保证数据的一致性，目标数组还回来之后要插进当前数据变量
      if (direction == "left") {
        currentDatas.value = sourceDatas.value.filter(function (val) {
          return !current.includes(val.key);
        });
        let arrLength = currentDatas.value.length;
        page.total = arrLength;
      }
    };

    //穿梭搜索
    const filterChange = query => {
      //自定义搜索，从当前数组变量中过滤，再渲染回组件
      var currentDatasCopy = sourceDatas.value.filter(function (val) {
        return (
          val.obj.userName.indexOf(query) > -1 &&
          !testValue.value.includes(val.key)
        );
      });
      if (currentDatasCopy.length != currentDatas.value.length) {
        currentDatas.value = currentDatasCopy;
        handleCurrentChange(1);
      }
    };

    //数组分组函数
    const groupFunc = val => {
      var currentDatasCopy = [];
      let arrLength = currentDatas.value.length;
      page.total = arrLength;
      let num = 100;
      let index = 0;
      for (let i = 0; i < arrLength; i++) {
        if (i % num === 0 && i !== 0) {
          currentDatasCopy.push(currentDatas.value.slice(index, i));
          index = i;
        }
        if (i + 1 === arrLength) {
          currentDatasCopy.push(currentDatas.value.slice(index, i + 1));
        }
      }
      return currentDatasCopy[val - 1];
    };
    init();

    return {
      currentPageDatas,
      currentDatas,
      sourceDatas,
      inputValue,
      page,
      testValue,
      transferChange,
      handleCurrentChange,
      filterChange,
      init
    };
  }
});
</script>
<style lang="scss" scoped>
:deep .el-transfer__buttons {
  padding: 0 15px;
}
:deep .el-button {
  display: block;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  padding: 0;
  border-radius: 50%;
}
:deep .el-transfer__button:nth-child(2) {
  margin: 0;
}
</style>
